<template>
  <div class="home">
    <Dashboard>
      <template #left>
        <div class="panel-content">
          <LeftPanel :data="initMonitorData"></LeftPanel>
        </div>
      </template>

      <template #center>
        <div class="panel-content">
          <Center :data="initDeviceStatus"></Center>
        </div>
      </template>

      <template #right>
        <div class="panel-content">
          <RightPanel :data="initDeviceStatus"></RightPanel>
        </div>
      </template>
    </Dashboard>
  </div>
</template>

<script setup>
import { ref, toRef, watch } from "vue";
import Dashboard from "@/views/Dashboard/index.vue";
import Center from "@/views/Center/index.vue";
import LeftPanel from "@/views/LeftPanel/index.vue";
import RightPanel from "@/views/RightPanel/index.vue";
import { useWebSocket } from "@/utils/useWebSocket";
import { useMonitorData } from "@/utils/useMonitorData";
import { useDeviceData } from "@/utils/useDeviceData";
import axios from "axios";
const { initMonitorData } = useMonitorData();
const { initDeviceStatus } = useDeviceData();
const { isConnected, deviceStatus, send, on, monitorData } = useWebSocket();
import {useTimeStore} from '@/stores/dateTime'
const timeStore = useTimeStore()


// 性能优化
// watch(monitorData, () => {}, {
//   deep: true,
//   flush: 'post' // 避免频繁更新
// })
// setTimeout(() => {

//   timeStore.updateTimeByApi('2022.01.01 18:00')
// },1000)
watch(
  monitorData,
  (newVal) => {
    console.log(
      "%c [ monitorData更新了 ]-53",
      "font-size:18px; background:#cdd104; color:#ffff48;",
      newVal
    );
    initMonitorData.value = newVal;
    timeStore.updateTimeByApi(newVal.date)

  },
  { deep: true }
);
watch(
  deviceStatus,
  (newVal) => {
    console.log(
      "%c [ deviceStatus更新了 ]-53",
      "font-size:18px; background:#cdd104; color:#ffff48;",
      newVal
    );
    initDeviceStatus.value = newVal;
  },
  { deep: true }
)
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #012052;
}
.panel-content {
  padding: 16px;
  box-sizing: border-box; /* 内边距包含在高度内 */
}
</style>
